<!--
Copyright 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<link rel="import" href="../model/patch-summary.html">
<link rel="import" href="../model/patch-summary-list.html">

<polymer-element name="tom-patch-summary" attributes="model viewMenu">
  <template>
    <link rel="stylesheet" href="./tom-patch-summary.css">
    <div class="row">
      <div class="metric-cell column">{{ model.value | toFixed }} {{ model.unit }}</div>

      <template bind="{{ model._issueTitle ? model._issueTitle : model._patchURL as title }}">
        <div class="patch-cell">
          <a href="{{ model._patchURL }}" title="{{ title }}">{{ title }}</a><br>
          <a href="{{ model._patchURL }}">#{{ model.patchset }}</a>
          <a href="{{ model._statusURL }}">[CQ Status]</a>
          <a href="{{ model._recentURL }}">[CQ Logs]</a>
        </div>
      </template>

      <template if="{{ !model._summary }}">
        <div class="column-container">
          <div class="column">Loading...</div>
        </div>
      </template>

      <template if="{{ model._summary }}">
        <template if="{{ viewMenu.value == 'jobs' }}">
          <div class="column grow builder-bubbles">
            <template repeat="{{ builder in model._jobViewBuilderBuilds[viewMenu.subMenu.value] }}">
              <span class="builder-bubble">
                <a href="http://build.chromium.org/p/{{ builder.master }}/builders/{{ builder.name }}" title="{{ builder.master }}">
                  {{ builder.name }}:
                </a>
                <template repeat="{{ build in builder.builds }}">
                  <a href="{{ build.url }}" title="{{ build.slave }}" class="build-bubble {{ build.state }}">
                    #{{ build.number }}
                  </a>
                </template>
              </span>
              <br>
            </template>
          </div>
        </template>

        <template if="{{ viewMenu.value == 'timeline' }}">
          <template bind="{{ model.list[viewMenu.subMenu.value] as interval }}">
            <div style="position: relative; width: 100%; overflow: hidden;">
              <template repeat="{{ attempt in model._summary.attempts }}">
                <a
                  href="{{ model._statusURL }}#{{ attempt.number }}"
                  class="attempt success-{{ attempt.success }}"
                  style="
                    left: {{ 100 * (attempt.begin - interval.begin) / (interval.end - interval.begin) }}%;
                    width: {{ 100 * attempt.durations.total / (interval.end - interval.begin) }}%;"
                  title="{{ attempt.summaryText }}">
                  {{ attempt.summaryText }}
                </a>
              </template>
            </div>
          </template>
        </template>

        <template if="{{ viewMenu.value == 'summary' }}">
          <div class="column-container">
            <template repeat="{{ value in model._columnValues }}">
              <div class="column">{{ value }}</div>
            </template>
          </div>
        </template>

      </template>
    </div class="row">
  </template>
  <script>
    Polymer({
      toFixed: function(number) {
        return number.toFixed();
      },
    });
  </script>
</polymer-element>
